<template>
  <a-form :model="{}" auto-label-width>
    <a-form-item field="name" label="ID">
      <a-input
        v-model.trim="elementBaseInfo.id"
        :disabled="idEditDisabled || elementBaseInfo.$type == 'bpmn.Process'"
        allow-clear
      />
    </a-form-item>
    <a-form-item field="post" label="名称">
      <a-input v-model.y.trim="elementBaseInfo.name" allow-clear placeholder="请输入名称" @change="updateBaseInfo('name')" />
    </a-form-item>
    <template v-if="elementBaseInfo.$type == 'bpmn.Process'">
      <a-form-item field="version" label="版本标签">
        <a-input
          v-model.trim="elementBaseInfo.versionTag"
          allow-clear
          placeholder="请输入版本标签"
          @change="updateBaseInfo('versionTag')"
        />
      </a-form-item>
      <a-form-item field="description" label="可执行">
        <a-switch
          v-model="elementBaseInfo.isExecutable"
          checked-text="是"
          checked-value="1"
          unchecked-text="否"
          unchecked-value="0"
          @change="updateBaseInfo('isExecutable')"
        />
      </a-form-item>
    </template>
  </a-form>
</template>
<script lang="ts" setup>
import { propTypes } from "@/utils/propTypes";

const props = defineProps({
  businessObject: propTypes.object.def(undefined),
  idEditDisabled: propTypes.bool.def(true),
  type: propTypes.string.def("")
});

const { businessObject } = toRefs(props); // 解构响应式引用

watch(
  businessObject,
  val => {
    if (val) {
      nextTick(() => {
        resetBaseInfo(); // 调用你的 resetBaseInfo 方法
      });
    }
  },
  { immediate: false }
);

const elementBaseInfo = ref<any>({});

const resetBaseInfo = () => {};

const updateBaseInfo = (key: string) => {};
</script>
<style lang="less" scoped>
:deep(.arco-form-item) {
  margin-bottom: 10px;
}
</style>
